<template>
    <view class="page">
        <view class="search-box">
            <input class="search-input" v-model.trim="keyword" type="text" placeholder="请输入关键字" @focus="isShow = true"
            @blur="onBlur">
            <button class="search-btn" @click="onSearch()">搜索</button>
        </view>

        <view class="list" >
            <view class="item" v-for="item in list" :key="item.id" @click="goInfo(item)">
                <view class="item-type">{{ item.type === 'buy' ? '买' : '卖' }}</view>
                <view class="item-message">{{ item.message }}</view>
            </view>
        </view>

        <!-- 如果搜索结果为空，就显示提示信息  -->
        <view class="list" v-if="!list.length">
            <view class="search-title">搜索历史</view>
            <view class="search-list" >
                <view class="search-item" >没有这条数据哦！</view>
            </view>
        </view>

        <!-- 搜索历史的数据一般是存储在本地的  Uni.setStorage()   Uni.getStorage()
            在点击 搜索 的时候存， 页面打开的时候取
         -->
        <view class="search-history" v-if="isShow" >
            <view class="search-title">搜索历史</view>
            <view class="search-list" >
                <view class="search-item" v-for="item in history" :key="item" @click="fastSearch(item)">{{ item }}</view>
            </view>
        </view>

    </view>
</template>

<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';

const list = ref<any[]>([])
const keyword = ref<string>('')    // 搜索关键字
const isShow = ref(false)   // 控制搜索面板的显示
// 获取本地存储的history 
const history = ref<string[]>(uni.getStorageSync('history') || [])  // 搜索记录

// 搜索
const getList = (keyword: string) => {
    uni.request({
        url: 'http://localhost:3000/trades',
        method: 'GET',
        data: {
            q: keyword,
        },
        success: ({ data }) => {
            // console.log('data',data);
            // 把data赋值给 list
            list.value = data as any[]
            // console.log('长度::', list.value.length);
        },
        fail: (err) => {
            console.log('err', err);
        }
    })
}

// 去详情页
const goInfo = (data: any) => {
    uni.navigateTo({
        // 传递参数
        url: `/pages/info/info?id=${data.id}`
    })
}

// 点击 搜索
// const onSearch = (keyword:string)=>{  // 参数可以不在这里传递
const onSearch = () => {

    // 1. 让新添加的搜索历史，出现在前面 push() ==> unshift()
    // 2. 限制历史的条数为 5
        // 01 直接 list.length = 5
        // 02 list.slice(0,5)  (裁切索引，裁切个数); 返回值就是裁切的值，不改变原数组
        // 02 list.splice(0,5)  (裁切索引，裁切个数); 返回值就是裁切的值，会改变原数组
  
    // 存储关键词    
    if(keyword.value.trim()){  // 有内容才会存进搜索历史中,trim()  去除空格
        history.value.unshift(keyword.value);

        if(history.value.length >= 4){  // 限制搜索历史的长度为 3 条
            // history.value.length = 3
            history.value = history.value.splice(0,3)
        }
        // 在小程序里面，是可以存储 数组、对象的 ; 在浏览器里面，需要转换成json
        uni.setStorageSync('history', history.value);
    }

    // 重新获取数据
    getList(keyword.value)
    keyword.value = ''  //清空搜索输入框
}

// 失去焦点数据
const onBlur = () => {
    setTimeout(() => {
        isShow.value = false
    }, 100)
}


// 快速搜索
const fastSearch = (item: string) => {
    getList(item)
}

onLoad(() => {
    getList('')
})

</script>
<style  scoped>
.search-box {
    height: 100rpx;
    display: flex;
    background-color: #e7e7e7;
    padding: 20rpx;
    align-items: center;
}

.search-input {
    border: 1px solid #333;
    flex: 1;
    height: 80rpx;
    padding-left: 20rpx;
    border-radius: 10rpx;
    background-color: #fff;

}

.search-btn {
    margin: 0 20rpx;
    height: 80rpx;
    line-height: 80rpx;

}

.item {
    height: 80rpx;
    line-height: 80rpx;
    border-bottom: 2px solid #000;
    padding: 10rpx 20rpx;
    display: flex;
}

.item-type {
    color: orange;
    font-weight: 700;
    margin-right: 20rpx;
}

.search-history {
    width: 100%;
    background-color: #fff;
    border-bottom: 1px solid #333;
    height: 600rpx;
    position: absolute;
    left: 0;
    top: 140rpx;
    border-bottom-left-radius: 40rpx;
    border-bottom-right-radius: 40rpx;
    /* 方案一：给整个盒子出现滚动条 */
    /* overflow-y: scroll; */

    /* 方案二：仅给下面搜索历史部分出现滚动条(不需要全局scroll了) */
    overflow-y: hidden;
    /* flex布局，就不需要设置高度了 */
    display: flex;
    flex-direction: column;
}

.search-title {
    height: 30px;
    line-height: 30px;
    padding: 20rpx;
    background-color: skyblue;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}

.search-list {
    display: flex;
    flex-wrap: wrap;

    /* flex: 1; 自动填充，如果不用flex布局的话就需要设置高度，否则不会出现滚动条 */
    flex: 1;
    /* flex布局，就不需要设置高度了 */
    overflow-y: auto;

}

.search-item {
    height: 30px;
    line-height: 30px;
    padding: 0 10rpx;
    border: 1px solid #000;
    margin-left: 20rpx;
    margin-top: 20rpx;
    border-radius: 20rpx;

}
</style>